<header class="docs-primary-header">
  <h1>Guides</h1>
</header>

<main focusOnNavigation aria-label="Guide list" id="guide-list" class="docs-guide">
  <div class="docs-guide-list">
  <a class='docs-guide-item' *ngFor="let guide of guideItems.getAllItems()"
     routerLink='/guide/{{guide.id}}'>
    <mat-card class="docs-guide-card">
      <mat-card-title>{{guide.name}}</mat-card-title>
      <div class="docs-guide-card-divider"></div>
      <mat-card-content class="docs-guide-card-summary">
        {{guide.overview}}
      </mat-card-content>
    </mat-card>
  </a>
  </div>
</main>

<app-footer></app-footer>
